import React from 'react';
import { Card, Button } from 'antd';

const ToolsWidget: React.FC = () => {
  const tools = [
    { id: 1, name: '计算器', icon: 'i-mdi-calculator', color: 'blue' },
    { id: 2, name: '日历', icon: 'i-mdi-calendar', color: 'green' },
    { id: 3, name: '记事本', icon: 'i-mdi-note-text', color: 'orange' },
    { id: 4, name: '截图', icon: 'i-mdi-camera', color: 'purple' },
    { id: 5, name: '文件管理', icon: 'i-mdi-folder', color: 'cyan' },
    { id: 6, name: '系统设置', icon: 'i-mdi-cog', color: 'red' },
  ];

  return (
    <Card 
      title="常用工具" 
      size="small" 
      className="h-full"
      styles={{ body: { padding: '12px' } }}
    >
      <div className="grid grid-cols-3 gap-2">
        {tools.map((tool) => (
          <Button
            key={tool.id}
            type="text"
            className="h-12 flex flex-col items-center justify-center p-1"
            onClick={() => console.log(`打开${tool.name}`)}
          >
            <i className={`${tool.icon} text-lg text-${tool.color}-500`} />
            <span className="text-xs mt-1">{tool.name}</span>
          </Button>
        ))}
      </div>
    </Card>
  );
};

export default ToolsWidget;